<template>

  <div>
    <router-view/>
<van-tabbar  v-model="active">
  
  <van-tabbar-item  
  v-for="(item, index) in tabBar" 
  :key="index"
  :to="item.path" 
  :icon="item.icon"
  :badge="item.badge ? $store.getters.allCount: null"
  >
  {{item.title}}
  </van-tabbar-item>
  <!-- <van-tabbar-item to="/home/list" icon="bar-chart-o" >列表</van-tabbar-item>
  <van-tabbar-item to="/home/car" icon="shopping-cart-o" :badge="$store.getters.allCount">购物车</van-tabbar-item>
  <van-tabbar-item to="/home/my"  icon="manager-o" >我的</van-tabbar-item> -->
</van-tabbar>

  </div>
     <!-- 购物车 -->
    
 
</template>

<script>
export default {
   data() {
    return {
      active: 0,
      tabBar: [
        {
          path: "/home/homes",
          icon:"newspaper-o",
          title:'首页',
          active:0
        },
        {
          path: "/home/list",
          icon:"bar-chart-o",
          title:'列表',
          active:1
        },
        {
          path: "/home/car",
          icon:"shopping-cart-o",
          title:'购物车',
          active: 2,
          // 是否灰标
          badge:true
        },
        {
          path:"/home/my" ,
          icon: "manager-o",
          title:'我的',
          active:3
        }
      ]
    };
  },
  created() {
      this.active = this.tabBar.filter(item =>item.path === this.$route.path )[0].active


 /*     // 分支 路由
    switch (this.$route.path) {
      case "/home/homes":
        this.active = 0
        break;
      case "/home/list":
        this.active = 1
        break;
      case "/home/car":
        this.active = 2
        break;
      case "/home/my":
        this.active = 3
        break;
      default:
        break; */
    }
  }

</script>

<style>

</style>